<template>
	<div>
		<el-page-header @back="handleBack" content="修改活动信息"></el-page-header>
		<el-row>
			<el-col :span="24">
				<el-form 
					size="mini"
					:model="addForm" 
					label-width="auto" 
					ref="addForm" 
					:rules="rules">
					<el-form-item size="mini" prop="name" label="活动名称">
						<el-input placeholder="请输入" clearable v-model.trim="addForm.name" ></el-input>
					</el-form-item>
					<el-form-item size="mini" prop="size" label="拼团人数">
						<el-input placeholder="请输入" clearable v-model.number="addForm.size" ></el-input>
					</el-form-item>
					<el-form-item size="mini" prop="teamDiscount" label="活动折扣">
						<el-input placeholder="请输入" clearable v-model.number="addForm.teamDiscount" ></el-input>
					</el-form-item>
					<el-form-item prop="goodsId" label="活动商品">
						<el-select v-model="addForm.goodsId" clearable>
							<el-option
								v-for="item in goodsList" 
								:key="item.id"
								:label="item.name"
								:value="item.id">

							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item size="mini" prop="endTime" label="活动结束时间">
						<el-date-picker
							:picker-options="options"
							v-model="addForm.endTime"
							format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss">
							
						</el-date-picker>
					</el-form-item>
					<el-form-item size="mini" prop="remark" label="活动备注">
						<el-input show-word-limit maxlength="300" type="textarea" placeholder="请输入" clearable v-model.number="addForm.remark" ></el-input>
					</el-form-item>
					<el-form-item size="mini">
						<el-button :loading="subLoading" @click="handleAdd" type="primary">提交</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { mapActions,mapState } from 'vuex';
	export default{
		name:'goods-add',
		data(){
			let _this = this;
			return {
				options:{
					disabledDate(v){
						let d = new Date().getTime()
						if(v.getTime()<d){
							return true
						}else{
							return false
						}
						
					}
				},
				rules:{
					name:[{
						required:true,
						message:'请输入活动名称'
					}],
					size:[{
						required:true,
						validator(rules,value,callback){
							if(value<=0){
								callback('拼团数量必须大于0')
							}else{
								callback()
							}
						}
					}],
					teamDiscount:[{
						required:true,
						validator(rules,value,callback){
							if(value<1||value>10){
								callback('活动折扣只能在1-10之间')
							}else{
								callback()
							}
						}
					}],
					goodsId:[{
						required:true,
						message:'请选择活动商品'
					}],
					endTime:[{
						required:true,
						message:'必须选择活动结束时间'
					}],
					
				},
				addForm:{
				},
				subLoading:false
			}
		},
		async created(){
			let id = this.$route.query.id;
			await this.getGoodsListAll()
			this.addForm = await this.findById(id)
		},
		computed:{
			...mapState('teamModel',['goodsList'])
		},
		methods:{
			...mapActions('teamModel',['getGoodsListAll','findById','update']),
			handleBack(){
				this.$router.history.go(-1)
			},
			async handleAdd(){
				let valid = await this.$refs.addForm.validate().catch(err => err);
				if(valid){
					
					this.subLoading = true
					await this.update(this.addForm)
					this.subLoading = false
					this.handleBack()
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
</style>
